<template>
  <div style="width: 1200px; margin: 90px auto; display: flex">
    <!-- 左边 -->
    <div id="left">
      <!-- card 1 -->
      <base-info
        v-if="!loading && !baseInfoEditable"
        :employee="employee"
        @toEdit="
          () => {
            baseInfoEditable = true;
          }
        "
      />
      <!-- card 1-1 -->
      <base-info-edit v-if="!loading && baseInfoEditable" :employee="employee">
        <el-button @click="baseInfoEditable = false">取消</el-button>
      </base-info-edit>

      <el-card>
        <div>
          <h3>工作经历</h3>
          <div style="color: gray">开发中...</div>
        </div>
      </el-card>
      
      <el-card>
        <div>
          <h3>项目经历</h3>
          <div style="color: gray">开发中...</div>
        </div>
      </el-card>
      <el-card>
        <div>
          <h3>教育经历</h3>
          <div style="color: gray">开发中...</div>
        </div>
      </el-card>
      <el-card>
        <div>
          <h3>附加信息</h3>
          <div style="color: gray">开发中...</div>
        </div>
      </el-card>
    </div>
    <!-- 右边 -->
    <div id="right">
      <el-card style="margin-top: 10px; margin-left: 10px">
        <input type="file" id="fileRef2" @change="workFileUpload" style="display: none"/>
        <div v-if="employee.resumeUrl" class="space-between">
          <div>你已经上传简历</div>
          <el-button @click="workFileRef">修改简历</el-button>
        </div>
        <div v-else class="space-between">
          你还没有上传简历
          <el-button @click="workFileRef">上传简历</el-button>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import BaseInfo from "@/components/notes/BaseInfo.vue";
import BaseInfoEdit from "@/components/notes/BaseInfoEdit.vue";
export default {
  components: { BaseInfo, BaseInfoEdit},
  data() {
    return {
      loading: true,
      baseInfoEditable: false,
      employee: {},
      username: "",
      birthday: null,
    };
  },
  created() {
    this.username = sessionStorage.getItem("username");
    // console.log(this.form.username);
    this.loading = true;
    this.axios
      .get("/employee/get-info", {
        params: {
          username: this.username,
        },
      })
      .then((res) => {
        if (res.data.code == 200) {
          this.employee = res.data.data;
          this.birthday = res.data.data.birthday;
          this.loading = false;
        }
      });
  },
  methods: {
    workFileRef() {
      document.getElementById("fileRef2").click();
    },
    edit() {
      // console.log('1111');
      this.$router.push("notes/employeeEdit");
    },
    workFileUpload(){
      const uploadFile = document.getElementById("fileRef2").files[0];
      if(uploadFile){
        const resFormData = new FormData();
        resFormData.append("file",uploadFile);
        resFormData.append("username", sessionStorage.getItem("username"))
        this.axios.post("/upload/employee-resume",resFormData).then(res =>{
          if (res.data.code === 200) {
            this.employee.resumeUrl = res.data.data;
          }
        })
      }
      
      
    }
  },
};
</script>

<style scoped>
#left {
  width: 65%;
}
#left > * {
  margin-top: 10px;
}
#right {
  width: 35%;
}
.space-between {
  display: flex;
  justify-content: space-between;
}
</style>